<template>
  <div class="app-container bg-gray">
    <transition name="fade-transform" mode="out-in">
      <router-view />
    </transition>
    <el-card v-if="isShow" class="box-1">
      <div class="header">
        <div class="bar">
          <el-select v-model="searchTerms.submitter" placeholder="来源" class="select" filterable>
            <el-option v-for="item in departments" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="searchTerms.state" placeholder="状态" class="select">
            <el-option v-for="item in departments" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="searchTerms.submitter" placeholder="指派人" class="select" filterable>
            <el-option v-for="item in departments" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="searchTerms.state" placeholder="跟进状态" class="select">
            <el-option v-for="item in departments" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-tooltip content="下次联系时间" placement="top">
            <el-date-picker v-model="searchTerms.date" class="picker" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-tooltip>
          <el-tooltip content="注册时间" placement="top">
            <el-date-picker v-model="searchTerms.date" class="picker" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-tooltip>
          <el-input v-model="searchTerms.input" placeholder="请输入内容" class="search-input" @change="search" />
          <el-button type="success" class="do-btn" icon="el-icon-search" @click="search">搜索</el-button>
        </div>
        <div>
          <el-button type="info" icon="el-icon-tickets"><a :href="$store.getters.serverUrl+'/customer/getdownload?c=demo'">下载模板</a></el-button>
          <el-upload :limit="1" :show-file-list="false" :before-upload="beforeUpload" :on-success="uploadSuccess" class="upload" accept=".xls,.xlsx" action="https://jsonplaceholder.typicode.com/posts/">
            <el-button type="primary" icon="el-icon-printer">批量导入</el-button>
          </el-upload>
          <el-button type="primary" icon="el-icon-printer" @click="handleDownload">批量导出</el-button>
          <el-button type="success" class="bg-green" icon="el-icon-plus" @click="toModify('新增客户')">批量添加</el-button>
          <el-button type="danger" icon="el-icon-delete">批量删除</el-button>
          <span class="flex-1" />
          <div class="add-custmer-num">
            <span>今日剩余可添加客户数：</span>
            <h1>10</h1>
            <el-button type="success" size="mini" class="bg-green">申请临时额度</el-button>
            <column-controller :check-items="th" @change="columnCheck" />
          </div>
        </div>
      </div>
      <el-table :data="tableData" :default-sort="{prop: 'id', order: 'descending'}" border style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" header-align="center" align="center" />
        <el-table-column v-if="th[0].check" prop="customer_name" label="客户名称" min-width="100" header-align="center" align="center" />
        <el-table-column v-if="th[1].check" prop="customer_status" label="跟进状态" min-width="100" header-align="center" align="center" />
        <el-table-column v-if="th[2].check" prop="company" label="公司" min-width="250" header-align="center" align="center" />
        <el-table-column v-if="th[3].check" prop="assignor" label="指派人" min-width="90" header-align="center" align="center" />
        <el-table-column v-if="th[4].check" prop="uploader" label="上传者" min-width="90" header-align="center" align="center" />
        <el-table-column v-if="th[5].check" prop="source" label="来源" min-width="120" header-align="center" align="center" />
        <el-table-column v-if="th[6].check" prop="project" label="项目" min-width="120" header-align="center" align="center" />
        <el-table-column v-if="th[7].check" prop="signin_date" label="注册时间" min-width="130" header-align="center" align="center" sortable />
        <el-table-column v-if="th[8].check" prop="updata_date" label="更新时间" min-width="130" header-align="center" align="center" sortable />
        <el-table-column v-if="th[9].check" prop="contact_date" label="联系时间" min-width="120" header-align="center" align="center" sortable>
          <template slot-scope="scope">
            <el-tag type="primary">{{ scope.row.contact_date }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tooltip content="详情" placement="top">
              <el-button type="primary" size="small" icon="el-icon-search" circle @click="toModify('客户详情')" />
            </el-tooltip>
            <el-tooltip content="添加至我的客户" placement="top">
              <el-button type="success" size="small" icon="el-icon-plus" class="bg-green" circle @click="toRecord" />
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button type="danger" size="small" icon="el-icon-delete" circle />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page.sync="currentPage" :page-size="pageSize" :total="total" class="pagination" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange" />
    </el-card>

    <el-dialog :visible.sync="dialogVisible" title="客户转移" width="25%" class="dialog" center>
      <div class="content">
        <div class="text">将所选 {{ multipleSelection.length }} 位客户转移至
          <el-radio-group v-model="transfer.where">
            <el-radio :label="0">公海</el-radio>
            <el-radio :label="1">销售</el-radio>
          </el-radio-group>
        </div>
        <el-select v-if="transfer.where==1" v-model="transfer.toId" placeholder="请选择转移用户" filterable>
          <el-option v-for="item in departments" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toTransfer">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ColumnController } from '../../components'
import { parseTime } from '@/utils'

export default {
  components: { ColumnController },
  data() {
    return {
      isShow: false,
      searchTerms: {
        submitter: '',
        state: '',
        date: '',
        input: ''
      },
      departments: [{
        value: '1',
        label: '网商'
      }, {
        value: '2',
        label: '百花'
      }, {
        value: '3',
        label: '后浪'
      }, {
        value: '4',
        label: '蓝书'
      }, {
        value: '5',
        label: '腾讯'
      }, {
        value: '6',
        label: '中琛源'
      }, {
        value: '7',
        label: '码农'
      }],
      dialogVisible: false,
      transfer: {
        id: '',
        where: 0,
        toId: ''
      },
      multipleSelection: [],
      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      total: 30,
      tableData: [{
        id: 190,
        customer_name: '朱峰',
        customer_status: 0,
        company: '深圳网商天下科技开发有限公司',
        assignor: 'root',
        uploader: '许堉颖',
        source: '腾讯云推广',
        project: '腾讯云体验',
        signin_date: '2018-09-19',
        updata_date: '2018-09-19',
        contact_date: '未联系'
      }, {
        id: 190,
        customer_name: '朱峰',
        customer_status: 0,
        company: '深圳网商天下科技开发有限公司',
        assignor: 'root',
        uploader: '许堉颖',
        source: '腾讯云推广',
        project: '腾讯云体验',
        signin_date: '2018-09-19',
        updata_date: '2018-09-19',
        contact_date: '未联系'
      }, {
        id: 190,
        customer_name: '朱峰',
        customer_status: 0,
        company: '深圳网商天下科技开发有限公司',
        assignor: 'root',
        uploader: '许堉颖',
        source: '腾讯云推广',
        project: '腾讯云体验',
        signin_date: '2018-09-19',
        updata_date: '2018-09-19',
        contact_date: '未联系'
      }, {
        id: 190,
        customer_name: '朱峰',
        customer_status: 0,
        company: '深圳网商天下科技开发有限公司',
        assignor: 'root',
        uploader: '许堉颖',
        source: '腾讯云推广',
        project: '腾讯云体验',
        signin_date: '2018-09-19',
        updata_date: '2018-09-19',
        contact_date: '2018-09-19'
      }, {
        id: 190,
        customer_name: '朱峰',
        customer_status: 0,
        company: '深圳网商天下科技开发有限公司',
        assignor: 'root',
        uploader: '许堉颖',
        source: '腾讯云推广',
        project: '腾讯云体验',
        signin_date: '2018-09-19',
        updata_date: '2018-09-19',
        contact_date: '2018-09-19'
      }, {
        id: 190,
        customer_name: '朱峰',
        customer_status: 0,
        company: '深圳网商天下科技开发有限公司',
        assignor: 'root',
        uploader: '许堉颖',
        source: '腾讯云推广',
        project: '腾讯云体验',
        signin_date: '2018-09-19',
        updata_date: '2018-09-19',
        contact_date: '2018-09-19'
      }, {
        id: 190,
        customer_name: '朱峰',
        customer_status: 0,
        company: '深圳网商天下科技开发有限公司',
        assignor: 'root',
        uploader: '许堉颖',
        source: '腾讯云推广',
        project: '腾讯云体验',
        signin_date: '2018-09-19',
        updata_date: '2018-09-19',
        contact_date: '2018-09-19'
      }],
      th: [{
        name: '客户名称',
        check: true
      }, {
        name: '跟进状态',
        check: true
      }, {
        name: '公司',
        check: true
      }, {
        name: '指派人',
        check: true
      }, {
        name: '上传者',
        check: true
      }, {
        name: '来源',
        check: true
      }, {
        name: '项目',
        check: true
      }, {
        name: '注册时间',
        check: true
      }, {
        name: '更新时间',
        check: true
      }, {
        name: '联系时间',
        check: true
      }]
    }
  },
  watch: {
    $route(to) {
      if (to.name === '客户公海') {
        setTimeout(() => {
          this.isShow = true
        }, 500)
      } else {
        this.isShow = false
      }
    }
  },
  created() {
    if (this.$route.name === '客户公海') {
      this.isShow = true
    }
  },
  methods: {
    columnCheck(index) {
      this.th[index].check = !this.th[index].check
      // console.log(index)
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
    },
    search() {
      // console.log(this.searchValue)
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    beforeUpload(file) {
      // console.log(file)
      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isExcel) {
        this.$message.error('导入失败,请检查导入的文件是否是.xlsx或.xls文件')
      }
      return isExcel
    },
    uploadSuccess(response, file, fileList) {
      this.$message({
        message: '导入成功',
        type: 'success'
      })
    },
    toTransfer() {
      this.dialogVisible = true
    },
    toDelete() {
      this.$confirm('此操作将删除该业绩订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    toRecord() {
      this.isShow = false
      this.$router.push({
        path: '/customer/mine/record'
      })
    },
    toModify(title) {
      this.isShow = false
      this.$router.push({
        path: '/customer/mine/modify',
        query: { title: title }
      })
    },
    // 导出
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['客户名称', '跟进状态', '公司', '指派人', '上传者', '来源', '项目', '注册时间', '更新时间', '联系时间']
        const filterVal = ['customer_name', 'customer_status', 'company', 'assignor', 'uploader', 'source', 'project', 'signin_date', 'updata_date', 'contact_date']
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '客户列表',
          autoWidth: true
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.box-1 {
  .header {
    .bar {
      line-height: 50px;
    }
    > div {
      @include flex-row(center, flex-start);
      padding: 2px 0;
      flex-wrap: wrap;
      .upload {
        padding: 0 10px;
      }
      .select {
        padding-right: 15px;
        width: 160px;
      }
      .picker {
        margin-right: 15px;
        width: 300px;
      }
      .do-btn {
        @extend .bg-green;
        margin-left: 6px;
      }
      .search-input {
        width: 240px;
      }
      .add-custmer-num{
        @include flex-row(center, flex-start);
        h1{
          font-size: 26px;
          color: $panGreen;
          padding:0 20px 0 6px;
        }
      }
    }
  }
}
.dialog {
  .content {
    text-align: center;
    .text {
      padding-bottom: 20px;
      .el-radio-group {
        padding-left: 15px;
      }
    }
  }
}
</style>
